<template>
  <view class="personal-info-page">
    <!-- 顶部导航栏（替代原绝对定位的 header） -->
    <view class="nav-bar">
    </view>

    <!-- 信息卡片区域 -->
    <view class="info-card">
      <!-- 头像行 -->
      <view class="info-item avatar-item">
        <text class="label">头像</text>
        <view class="avatar-wrap">
          <image class="avatar" :src="avatarUrl" mode="widthFix"></image>
          <!-- 箭头单独用 icon 展示 -->
          <image class="arrow-icon" src="@/img/车联网服务-08我的 -02个人信息_slices/收起箭头小.png" mode="widthFix"></image>
        </view>
      </view>

      <!-- 姓名行 -->
      <view class="info-item">
        <text class="label">姓名</text>
        <text class="value">{{name}}</text>
      </view>

      <!-- 电话行 -->
      <view class="info-item">
        <text class="label">电话</text>
        <text class="value">{{phone}}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      avatarUrl: 'https://picsum.photos/200/200', // 头像占位图
      name: '张先生',
      phone: '15023457896',
    }
  },
  methods: {
    goBack() {
      uni.navigateBack({ delta: 1 });
    }
  }
}
</script>

<style scoped>
/* 页面基础容器 */
.personal-info-page {
  background-color: #f5f5f5;
  min-height: 100vh;
   /* 给导航栏留空间 */
  box-sizing: border-box;
  position: relative; /* 为绝对定位元素提供参考 */
}

/* 顶部导航栏 */
.nav-bar {
  position: absolute;
  background-color: #3184fd;
  height: 300rpx;
  width: 100%;
  z-index: 2;
  /* 保留你原有导航栏的所有定位和尺寸 */
}

/* 信息卡片 */
.info-card {
  position: absolute;
  width: 90%;
  /* 高度改为 auto，由内容撑开，避免固定高度导致内容挤压 */
  height: auto; 
  background-color: white;
  border-radius: 20rpx;
  margin: 100rpx 5% 0 5%;
  z-index: 3;
  top: -40px;
  
  /* 移除导致内容居中的 flex 布局，恢复正常流 */
  display: block; 
  padding: 30rpx; /* 增加内边距，让内容有呼吸感 */
  box-sizing: border-box;
}

/* 信息项通用样式 */
.info-item {
  display: flex;
  align-items: center;
  justify-content: space-between; /* 标签与内容两端对齐 */
  padding: 30rpx 0;
  border-bottom: 1px solid #f1f1f1;
}

.info-item:last-child {
  border-bottom: none;
}

/* 标签样式 */
.label {
  font-size: 32rpx;
  color: #333;
  width: 120rpx; /* 缩小标签宽度，更贴近参考效果 */
}

/* 头像行特殊处理 */
.avatar-item {
  align-items: center;
}

.avatar-wrap {
  display: flex;
  align-items: center;
}

/* 头像样式 */
.avatar {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50rpx;
  margin-right: 20rpx;
}

/* 箭头图标 */
.arrow-icon {
  width: 20rpx;
  height: 20rpx;
}

/* 内容值样式 */
.value {
  font-size: 32rpx;
  color: #666;
  text-align: right; /* 内容右对齐 */
}
</style>